<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>智能导诊</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="/lobsteruiframe/weui/css/weui.css" />
    <link rel="stylesheet" href="/lobsteruiframe/weui/css/weuix.css" />
    <script src="/lobsteruiframe/weui/js/zepto.min.js"></script>
    <script src="/lobsteruiframe/weui/js/zepto.weui.js"></script>
    <script src="/lobsteruiframe/weui/js/swipe.js"></script>
    <script src="/lobsteruiframe/weui/js/macy.js"></script>
    <script src="/jslib/lobster.js"></script>
    <script src="../js/template-web.js"></script>
    <script src="../js/ai.js"></script>
</head>
<style>
    .padding-all {
        padding: 10px
    }

    .w-3 {
        width: 33.33%;
        float: left;
        padding: .6rem .4rem;
        box-sizing: border-box;
        position: relative;
    }

    .category-top {
        border-bottom: 1px solid #e8e8e8;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        z-index: 1;
        background: #F6F6F9
    }

    .menu-left,
    .menu-right {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        overflow-y: scroll;
    }

    .menu-right #loading {
        left: 11px;
        top: 44px;
    }

    .menu-left {
        background: #F6F6F9;
    }

    .menu-left ul li {
        box-sizing: border-box;
        font-size: 12px;
        color: #333;
        width: 76px;
        height: 42px;
        line-height: 42px;
        text-align: center;
    }

    .menu-left ul li.active {
        background: #fff;
        position: relative;
    }

    .menu-left ul li.active:before {
        content: " ";
        position: absolute;
        display: block;
        width: 2px;
        height: 100%;
        background: #07c160;
        top: 0;
        left: 0;
    }

    .menu-right {
        background: #fff;
        position: inherit;
        margin-left: 76px;
        margin-top: 0;
        right: 0;
        bottom: 0;
    }

    .menu-right h5 {
        font-size: 12px;
        padding-top: 2px;
        color: #666;
        margin-top: 12px;
        margin-bottom: 4px;
        border-bottom: 1px solid #f5f5f5;
        padding-bottom: 8px;
    }

    .menu-right h5:first-child {
        margin-top: 0;
    }

    .menu-right ul {
        overflow: hidden;
    }

    .menu-right ul li {
        text-align: center;
        list-style: none;
    }

    .menu-right ul li a {
        display: block;
        position: absolute;
        left: 3px;
        top: 7px;
        bottom: 7px;
        right: 3px;
    }

    .menu-right ul li:nth-child(3n+1) a {
        left: 0;
        right: 7px;
    }

    .menu-right ul li:nth-child(3n) a {
        right: 0;
        left: 7px;
    }

    .menu-right ul li span {
        display: block;
        height: 26px;
        line-height: 26px;
        overflow: hidden;
        text-align: center;
        font-size: 10px;
        color: #888;
    }

    .menu-right ul li img {
        width: 50px;
        height: 50px;
    }

    .mune-no-img img {
        display: none
    }

    .mune-no-img span {
        border: 1px solid #efefef;
        color: #555;
        border-radius: 4px;
    }
</style>

<body>
    <div class="bordertop weui-tab" id="tb1">
        <div class="weui-navbar" id="bordertop">
        </div>
        <div class="weui-tab__panel">
            <div id="s0" class="weui-tab__content">
                <div class="pos" id="pos">
                    <div class="pos-position" style="top:40px;">
                        <div class="pos-bg">
                            <image id="pos-bg" src="../images/m1.png" />
                        </div>
                        <div class="pos-anchor" id="pos-anchor">

                        </div>
                        <div class="pos-child" id="pos-child">

                        </div>
                        <div class="pos-child pos-poth" id="pos-poth">

                        </div>
                    </div>
                </div>
            </div>
            <div id="s1" class="weui-tab__content">
                <aside>
                    <div class="menu-left scrollbar-none" id="sidebar">
                        <ul id="leftdiv">

                        </ul>
                    </div>
                </aside>
                <section class="menu-right padding-all j-content">
                    <div class="weui-cells" id="rightdiv">

                    </div>
                </section> 
            </div>
        </div>
    </div>
</body>
<style>
    .pos {
        height: 100%;
        box-sizing: border-box;
    }

    .pos-bg {
        margin-left: 37px;
    }

    .pos-bg img {
        width: 300px;
        height: 500px;
    }

    .pos-position {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .pos-anchor {
        position: absolute;
        top: 0;
        left: 75px;
        width: 300px;
        height: 500px;
    }

    .pos-item {
        position: absolute;
        font-size: 16px;
        text-align: center;
        color: #FF9800;
        text-shadow: 1px 1px 1px #fff;
        overflow: hidden;
    }

    .pos-anchor .sele {
        color: #07c160;
    }

    .pos-item img {
        width: 300px;
        height: 500px;
        position: absolute;
    }

    .pos-txt {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .pos-v {
        opacity: .7;
    }

    .bgdiv {
        background-image: none !important;
    }

    .pos-child {
        position: absolute;
        top: 30px;
        right: 10px;
        width: 100px;
    }

    .pos-child div {
        text-align: center;
        background-color: #07c160;
        border-radius: 5px;
        color: #fff;
        font-size: 16px;
        margin: 5px;
        line-height: 30px;
    }

    .sym {
        position: relative;
    }

    .sym-left {
        width: 36%;
        font-size: 15px;
    }

    .sym-left div {
        line-height: 40px;
        background-color: #fff;
        text-align: center;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #eee;
    }

    .sym .sele {
        background-color: #4990e250;
        position: relative;
    }

    .sym .sele::after {
        content: "";
        position: absolute;
        right: 0px;
        top: 12px;
        width: 0;
        height: 0;
        border: 12px solid transparent;
        border-right-color: #07c160;
        border-top-width: 12px;
        border-bottom-width: 12px;
    }

    .sym-right {
        /* position: inherit;
        width: 275px;
        margin-left: 100px; */
        width: 64%;
    }

    .sym-right .item {
        padding: 10px;
        font-size: 14px;
    }

    .sym-right .item text {
        color: #07c160;
        text-decoration: underline;
    }

    .pos-poth {
        /* bottom: 25px; */
        top: auto;
    }

    .pos-poth div {
        background-color: #fff;
        border: 1px solid #07c160;
        color: #07c160;
    }

    .pos-poth .sele {
        background-color: #07c160;
        color: #fff;
    } 

    /*去除滚动条*/
    ::-webkit-scrollbar {
        display: none;
    }

    .scrolldiv {
        overflow-y: scroll;
    }
    .weui-cells{
        margin-top: 0;
    }
</style>

</html>
<script type="text/template" id="postion">
    {{each list }} 
     <div  data-code="{{$value.code}}"  class="pos-item {{$value.code.code==seleCode?'sele':'bgview'}}" 
                    style="left:{{$value.l/2-37}}px;top:{{$value.t/2}}px; width:{{$value.r/2-$value.l/2}}px;height:{{$value.b/2-$value.t/2}}px; ">
        {{if($value.code==seleCode)}}
        <image style="left:-{{$value.l/2}}px;top:-{{$value.t/2}}px;"
                        src="../images/{{imgurl2}}"> </image>
        {{/if}}
        <div class="pos-txt"> </div> 
    </div>
    {{/each}}
</script>
<script type="text/template" id="child">
    {{each list}}
    <div class="seleChild" data-code="{{$value.PositionCode}}">
    {{$value.PositionName}}
    </div>
    {{/each}}
</script>
<script type="text/template" id="poth">
    {{if(imgType==1)}} 
    <div class="selePos sele" data-type="1">正面</div>
    <div class="selePos" data-type="2">背面</div>
    {{else}}
    <div class="selePos" data-type="1">正面</div>
    <div class="selePos sele" data-type="2">背面</div>
    {{/if}}
</script>
<script type="text/template" id="bordertoptemp">
        {{each list item}}
        <div class="weui-navbar__item">
            {{item.title}}
        </div>
        {{/each}} 
    </div> 
</script>

<script type="text/template" id="lefttemp">
    {{each list item}}
    {{if(item.ParentId>0)}}
        {{if(item.PositionCode==selechildCode)}}
        <li  data-dtype="oth" data-code="{{item.PositionCode}}" class="active">{{item.PositionName}}</li> 
        {{else}}
        <li data-dtype="oth" data-code="{{item.PositionCode}}">{{item.PositionName}}</li>
        {{/if}}  
    {{/if}}
    {{/each}}
</script>
<script type="text/template" id="righttemp">
    {{each list}}
    {{if($value.PositionCode==selechildCode&&(($value.ClassType&sexType)==sexType))}}   
        {{each $value.List item2}} 
        <a class="weui-cell weui-cell_access" href="result.html?symid={{item2.SymId}}">
            <div class="weui-cell__bd">
                <p> {{item2.Symptom}}</p>
            </div>
            <div class="weui-cell__ft">去挂号</div>
        </a>
        {{/each}} 
    {{/if}}
    {{/each}}
</script>
<script>
    /**
   * 所有设置点
   */
    var allPos = [{
        sexType: 1,
        imgType: 1,
        img: "m1.png",
        img2: "m22.png",
        posItems: [{ code: '01', l: 210, t: 35, r: 390, b: 215, txt: '头' },
        { code: '02', l: 225, t: 215, r: 365, b: 250, txt: '颈部' },
        { code: '03', l: 220, t: 250, r: 380, b: 384, txt: '前胸' },
        { code: '04', l: 220, t: 384, r: 380, b: 480, txt: '腹部' },
        { code: '05', l: 212, t: 480, r: 388, b: 600, txt: '盆腔' },
        { code: '0904', l: 212, t: 590, r: 300, b: 886, txt: '腿' },
        { code: '0904', l: 300, t: 590, r: 390, b: 886, txt: '腿' },
        { code: '0902', l: 100, t: 220, r: 210, b: 500, txt: '手臂' },
        { code: '0902', l: 381, t: 220, r: 500, b: 500, txt: '手臂' },
        { code: '0901', l: 100, t: 500, r: 201, b: 600, txt: '手' },
        { code: '0901', l: 396, t: 500, r: 500, b: 600, txt: '手' },
        { code: '0903', l: 210, t: 886, r: 390, b: 965, txt: '足' }]
    }, {
        sexType: 1,
        imgType: 2,
        img: "m2.png",
        img2: "m21.png",
        posItems: [
            { code: '06', l: 220, t: 250, r: 380, b: 384, txt: '后背' },
            { code: '07', l: 220, t: 384, r: 380, b: 480, txt: '后腰' },
            { code: '08', l: 212, t: 480, r: 388, b: 600, txt: '臀部' }]
    }, {
        sexType: 2,
        imgType: 1,
        img: "w1.png",
        img2: "w22.png",
        posItems: [{ code: '01', l: 230, t: 35, r: 365, b: 181, txt: '头' },
        { code: '02', l: 225, t: 181, r: 365, b: 220, txt: '颈部' },
        { code: '03', l: 225, t: 220, r: 375, b: 340, txt: '前胸' },
        { code: '04', l: 237, t: 340, r: 364, b: 429, txt: '腹部' },
        { code: '05', l: 218, t: 437, r: 388, b: 525, txt: '盆腔' },
        { code: '0904', l: 204, t: 525, r: 300, b: 886, txt: '腿' },
        { code: '0904', l: 300, t: 525, r: 390, b: 886, txt: '腿' },
        { code: '0902', l: 156, t: 220, r: 225, b: 493, txt: '手臂' },
        { code: '0902', l: 375, t: 220, r: 437, b: 493, txt: '手臂' },
        { code: '0901', l: 143, t: 493, r: 201, b: 573, txt: '手' },
        { code: '0901', l: 396, t: 493, r: 460, b: 573, txt: '手' },
        { code: '0903', l: 230, t: 886, r: 370, b: 965, txt: '足' }]
    }, {
        sexType: 2,
        imgType: 2,
        img: "w2.png",
        img2: "w21.png",
        posItems: [
            { code: '06', l: 237, t: 217, r: 364, b: 344, txt: '后背' },
            { code: '07', l: 237, t: 344, r: 364, b: 429, txt: '后腰' },
            { code: '08', l: 218, t: 437, r: 388, b: 525, txt: '臀部' }]
    }];
    var controller = {
        data: {
            sexType: 1, //1为男，2为女
            imgType: 1, //1为正面，2为反面
            imgurl: null,
            imgurl2: null,
            positionList: [],
            width: 400,//屏幕宽度
            height: 1000,//屏幕高度
            dtype: null,//选择类型 ，当有值时代表不是提高人体图选择
            tabs: [{
                key: "tab1",
                title: "人体部位"
            }, {
                key: "tab2",
                title: "症状汇总"
            }],
            current: 0, //当前选中tab
            seleCode: '',
            selechildCode: '',
            childItems: [],
            posItems: [],
            symptomList: [],
            topNum: 0
        },
        //初始化页面
        initpage: function () {
            var self = this;
            self.height = document.documentElement.clientHeight || document.body.clientHeight;
            self.width = document.documentElement.clientWidth || document.body.clientWidth;
            self.data.sexType = lobsterh5.GetUrlParam("type") || 1;
            self.initevent();
            //alert('初始化页面')
            var aidata = localStorage.getItem("aidata");
            //alert('初始化页面2'+aidata)
            if (aidata) {
                self.data.positionList = JSON.parse(aidata).positionList;
                self.viewPosition();
                self.inittemp("bordertoptemp", "bordertop", { list: self.data.tabs });
                self.inittemp("postion", "pos-anchor", { list: self.data.posItems, seleCode: self.data.seleCode, imgurl2: self.data.imgurl2 });
                self.inittemp("child", "pos-child", { list: self.data.childItems });
                self.inittemp("poth", "pos-poth", { imgType: self.data.imgType });

            } else {
                //alert('查询开始')
                lobstercommon.name='lobsterh5';
                lobsterh5.GETAPI("tsFront.getPositionList").then(res => {
                    // ai.getSymptom().then(res => {
                    //     //alert(JSON.stringify( res));
                    //alert('查询结束');
                    localStorage.setItem("aidata", JSON.stringify(res))
                    self.data.positionList = res.positionList;
                    self.viewPosition();
                    self.inittemp("bordertoptemp", "bordertop", { list: self.data.tabs });
                    self.inittemp("postion", "pos-anchor", { list: self.data.posItems, seleCode: self.data.seleCode, imgurl2: self.data.imgurl2 });
                    self.inittemp("child", "pos-child", { list: self.data.childItems });
                    self.inittemp("poth", "pos-poth", { imgType: self.data.imgType });

                    // self.initevent(); 
                }).catch(res => {
                    //alert('查询异常'+JSON.stringify(res));
                    $.toast(res.msg, 'forbidden');
                });
            }

        },
        //初始化事件
        initevent: function () {
            var self = this;

            $("#pos-anchor").on("click", ".pos-item", function () {
                self.tapPosition($(this));
            })
            $("#pos-poth").on("click", ".selePos", function () {
                self.selePos($(this));
            })

            $("#pos-child").on("click", ".seleChild", function () {
                self.seleChild($(this));
            })
            $("#leftdiv").on("click", "li", function () {
                $(this).addClass('active').siblings('li').removeClass('active');
                self.seleChild($(this));
            })
        },
        /**
       * 选择症状
       */

        /**
         * 选择子部位 
        */
        seleChild: function (_this) {
            var code = _this.data("code");
            var dtype = _this.data("dtype");
            this.data.current = 1;
            this.data.selechildCode = code;
            this.data.dtype = dtype;
            this.viewSymptom();
        },
        viewPosition: function () {
            var self = this
            var dw = allPos.filter(a => a.sexType == self.data.sexType && a.imgType == self.data.imgType)[0];
            self.data.posItems = dw.posItems;
            self.data.imgurl = dw.img2;
            self.data.imgurl2 = dw.img;
            $("#pos-bg").attr("src", "../images/" + self.data.imgurl);
        },
        inittemp(tempid, _id, data) {
            var self = this;
            var html = template(tempid, data);
            $("#" + _id).html(html);
            if (_id == "bordertop") {
                $('#tb1').tab({
                    defaultIndex: self.data.current,
                    activeClass: 'tab-green',
                    onToggle: function (index) {
                        self.data.current = index;
                    }
                })
            }
        },
        /**
        * 选择位置
        */
        tapPosition: function (_this) {
            var code = _this.data("code");
            var position = this.data.positionList.filter(a => a.PositionCode == code)[0];
            var childlist = this.data.positionList.filter(a => a.ParentId == position.ID);
            if (childlist.length == 0) {
                this.data.seleCode = code;
                this.data.selechildCode = code;
                this.data.childItems = childlist;
                this.data.dtype = null;
                this.data.current = 1;
                this.viewSymptom();
            } else if (childlist.length == 1) {
                this.data.seleCode = code;
                this.data.selechildCode = childlist[0].PositionCode;
                this.data.childItems = childlist;
                this.data.dtype = null;
                this.data.current = 1;
                this.viewSymptom();
            }
            else {
                this.data.seleCode = code;
                this.data.selechildCode = childlist[0].PositionCode;
                this.data.childItems = childlist;
            }
            this.inittemp("postion", "pos-anchor", { list: this.data.posItems, seleCode: this.data.seleCode, imgurl2: this.data.imgurl2 });
            this.inittemp("child", "pos-child", { list: this.data.childItems });
        },
        /**
        * 显示症状
        */
        viewSymptom: function () {

            var position = this.data.positionList.filter(a => a.PositionCode == this.data.selechildCode)[0];
            // //alert('ok3');
            if (this.data.symptomList.length == 0) {
                // //alert('ok4');
                var aidata = JSON.parse(localStorage.getItem("aidata"));
                // //alert(localStorage.getItem("aidata"));
                //初始化
                var symptomClassList = aidata.symptomClassList;
                var sym = aidata.symptomList;
                symptomClassList.forEach(a => {
                    a.List = sym.filter(b => b.ClassId == a.ClassId);
                    this.data.symptomList.push(a);
                })
                this.data.symptomList = this.data.symptomList;
            }
            //  
            if (position && position.ParentId > 0) {
                position = this.data.positionList.filter(a => a.ID == position.ParentId)[0];
            }
            if (position) {
                if (!this.data.dtype) {
                    //部位重排,对应部位排最上面
                    var j = 0;
                    for (var i = 0; i < this.data.positionList.length; i++) {
                        if (this.data.positionList[i].ParentId == position.ID) {
                            if (i == 0) break;
                            var d = this.data.positionList[i];
                            this.data.positionList.splice(i, 1);
                            this.data.positionList.splice(j, 0, d);
                            j++;
                        }
                    }
                    this.data.positionList = JSON.parse(JSON.stringify(this.data.positionList));

                }
            } else {
                position = this.data.positionList.filter(a => a.ParentId > 0)[0];
                this.data.selechildCode = position.PositionCode;
            }
            this.data.topNum = 0;
            this.inittemp("bordertoptemp", "bordertop", { list: this.data.tabs });
            this.inittemp("lefttemp", "leftdiv", { list: this.data.positionList, selechildCode: this.data.selechildCode });
            this.inittemp("righttemp", "rightdiv", { list: this.data.symptomList, selechildCode: this.data.selechildCode, sexType: this.data.sexType });

        },
        /**
        * 选择正面侧面
        *  
        */
        selePos: function (_this) {
            var code = _this.data("type")
            if (code == this.data.imgType)
                return;
            this.data.imgType = code;
            this.viewPosition();
            this.inittemp("postion", "pos-anchor", { list: this.data.posItems, seleCode: this.data.seleCode, imgurl2: this.data.imgurl2 });
            this.inittemp("poth", "pos-poth", { imgType: this.data.imgType });
        },
    }
    $(function () {
        controller.initpage();
    })

</script>